Skip to main content

​
Import Figma Designs into Build Agent

Transform your Figma designs into functional apps by importing them directly into CREAO’s build agent. This is a build agent integration that enables the AI to understand and implement your designs during the app creation process.
Build Agent Integration: This integration is used by CREAO’s build agent to help create your apps based on Figma designs. This is different from app integrations (like APIs or MCP servers) that your built apps can use after they’re created.

​
Setup Your Figma Build Agent Integration

​
Step 1: Generate Figma Personal Access Token

First, create your personal access token in Figma:
  1. Go to your Figma account settings
  2. Navigate to Personal Access Tokens section
  3. Click Generate new token
  4. Give your token a descriptive name (e.g., “CREAO Build Agent”)
  5. Copy the generated token
Keep your token secure: Personal access tokens provide access to your Figma files. Store them safely and never share them publicly.
For detailed instructions, visit: Figma’s Personal Access Token Guide

​
Step 2: Register API Key in CREAO

Connect your Figma account to CREAO’s build agent:
1

Access Settings

Navigate to My CREAO → Settings in your dashboard
2

Add Figma Token

Find the Figma Build Agent Integration section and paste your personal access token
3

Save Configuration

Click Save to activate the build agent integration
Figma access token configuration in CREAO settings

​
Using Figma Designs During App Creation

To reference specific parts of your Figma design, you’ll need to copy the appropriate link:

​
For Specific Frames or Components

For the most consistent results, work on one section at a time by copying links to specific frames or groups:
  1. Right-click on the frame or group you’d like to implement
  2. Select Copy/Paste as
  3. Choose Copy link to selection
This approach helps avoid overwhelming the AI agent with too much information from complex designs. For detailed instructions on copying Figma links, see: Framelink’s Figma Link Guide

​
Include Figma URLs in Prompts

Once configured, you can reference Figma designs directly in your build prompts to help the AI create your app:

​
Initial Prompt

When starting a new project, include your Figma design URL to guide the build agent: 
Build a dashboard app based on this Figma design: 
https://www.figma.com/file/[your-file-id]/[your-design-name]

Make it responsive and include all the components shown in the design.

​
Follow-up Prompts

Continue referencing the design for refinements during the build process: 
Update the sidebar navigation to match the Figma design exactly:
https://www.figma.com/file/[your-file-id]/[your-design-name]

Focus on the navigation component in frame 2.

​
Best Practices

Specific References

Reference specific frames, components, or sections when making updates

Design Context

Provide context about the design’s purpose and target users

Responsive Considerations

Mention mobile and desktop variations if they exist in your design

Interactive Elements

Describe expected interactions and hover states from your design

​
What Gets Imported

When you reference a Figma design, CREAO’s build agent can access:
  • Visual Layout: Component positioning, spacing, and hierarchy
  • Typography: Font families, sizes, weights, and text styles
  • Colors: Brand colors, backgrounds, and color schemes
  • Components: Buttons, forms, cards, and other UI elements
  • Assets: Icons, images, and other design assets
  • Spacing: Margins, padding, and grid systems

​
Troubleshooting

  • Verify your token is correctly copied without extra spaces
  • Check that the token hasn’t expired
  • Ensure you have access to the Figma file you’re referencing
  • Confirm the Figma file URL is public or shared with your account
  • Check that the file hasn’t been moved or deleted
  • Verify the URL format is correct
  • Ensure all design elements are properly organized in Figma
  • Check that text layers use system fonts or uploaded fonts
  • Verify images and assets are properly embedded

​
Build Agent vs App Integrations

Understanding the difference between integration types:

Build Agent Integrations

Used during app creation
  • Figma Design Import (this integration)
  • Help the AI build your app
  • Configure once, use in all projects
  • Examples: Design references, code templates

App Integrations

Used by your built apps
  • APIs and MCP Servers
  • Add functionality to finished apps
  • Configure per app as needed
  • Examples: Database connections, external services